<template>
    <div class="topicList">
        <div class="item" 
        v-for="(item, index) in list" :key="index" @click="showPreview(item)">
            <div class="title space">{{ item.title }}</div>
            <div class="bottom">
                <div style="text-align: left;width: 48%;">
                    <el-rate
                        v-model="item.level"
                        disabled
                        >
                    </el-rate>
                </div>
<!--                <div class="time">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</div>-->
                <div><el-link type="primary" @click.stop="$router.push('/student/code?id=' + item.id)">做题</el-link></div>
            </div>
        </div>
        <div>
            <topicPreview :topic="topic" :drawer="drawer" @handleClose="drawer = false"/>
        </div>
    </div>
</template>

<script>
    import topicPreview from '@/components/topic/topicPreview.vue'
    export default {
        props : ['list'],
        components : {
            topicPreview
        },
        data(){
            return {
                topic : {},
                drawer : false
            }
        },
        created(){

        },
        methods : {
            showPreview(topic){
                this.topic = topic
                this.drawer = true
            }
        }
    }
</script>

<style lang="scss" scoped>
.topicList{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .item{
        height: 100px;
        width: 400px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
        margin: 10px;
        cursor: pointer;
        .title{
            font-weight: 900;
        }
        .bottom{
            padding-top: 15px;
            display: flex;
            &>div{
                width: 26%;
                text-align: right;
            }
            .time{
                font-size: 12px;
            }
        }
    }
}
</style>